<template>
  <el-dialog top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="600px">
    <el-container>
      <el-main v-loading="submitLoading"
        :style="{ 'max-height': maxHeightDialog }"
        :element-loading-text="submitLoading ? '提交中...' : '加载中...'"
        class="container-main">
        <el-form ref="elForm"
          size="small"
          label-position="right"
          :model="form"
          :rules="rules"
          label-width="100px">
          <div>
            <div class="title">
              <span>填写基本信息</span>
            </div>
            <el-card class="card"
              shadow="never"
              style="background: #fafafa">
              <div>
                <el-row>
                  <el-col :span="23">
                    <el-form-item label="设备型号"
                      prop="deviceModel">
                      <el-select v-model="form.deviceModel"
                        popper-class="global-select"
                        placeholder="选择设备型号"
                        clearable
                        filterable>
                        <el-option v-for="item in deviceModelList"
                          :key="item.dictValue"
                          :label="item.dictText"
                          :value="item.dictText" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-form>
      </el-main>

      <el-footer>
        <el-button size="medium"
          icon="el-icon-close"
          :disabled="submitLoading"
          style="width: 120px; margin-right: 10px"
          @click="isVisible = false">
          取消
        </el-button>
        <el-button size="medium"
          type="primary"
          icon="el-icon-check"
          :disabled="submitLoading"
          :loading="submitLoading"
          style="width: 120px"
          @click="toSubmit">
          {{ params.item.id == -1 ? "提交" : "修改" }}
        </el-button>
      </el-footer>
    </el-container>

  </el-dialog>
</template>
<script>
import dataFormMixins from "@/mixins/data-form-mixins";
import deviceManageApi from "@/api/device-manage";
import systemManageApi from "@/api/system-manage";
export default {
  name: "FunctionalServicesAdd",
  components: {

  },
  mixins: [dataFormMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    params: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data () {
    return {
      deviceModelList: [],

    };
  },
  computed: {
    isVisible: {
      get () {
        return this.dialogVisible;
      },
      set () {
        this.toClose();
      }
    },
  },

  created () { },
  mounted () {
    this.rules = {
      deviceModel: this.getValidatorForm(),
    };
    this.form = {
      deviceModel: null, // 设备型号
    };

    this.getSelectData()

    // if (this.params.item.id !== -1) {
    //   this.getDetail();
    // }

  },
  methods: {
    getSelectData () {
      //设备型号
      deviceManageApi.getDictValueAttr({
        fieldName: "collect_model",
        tableName: "t_equipment_collect"
      }).then(r => {
        this.deviceModelList = r.data.dictValue;
      });
    },
    toClose () {
      this.$emit("close");
    },
    toSubmit () {
      this.$refs.elForm.validate(valid => {
        if (valid) {
          systemManageApi.addDeviceModelTsl(this.form).then(ret => {
            this.submitLoading = false;
            this.isVisible = false;
            this.$message({
              message: "提交成功！",
              type: "success"
            });
            this.$emit("submit", "add");
          })
        } else {
          this.$message({
            message: "请完善表单内容！",
            type: "warning",
            duration: 4000
          });
          return false;
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../../styles/part-custom";
</style>
